<template>
  <div class="cash">
    <Card>
      <p slot="title">银行列表</p>
      <div class="search-con search-con-top">
        <i-input size="large" class="search-input" placeholder="银行名称"></i-input>
        <i-input size="large" class="search-input" placeholder="开户名"></i-input>
        <i-input size="large" class="search-input" placeholder="银行卡号"></i-input>
        <Button size="large" class="search-btn">
          <Icon type="search" />搜索</Button>
      </div>
      <div>
        <Button size="large" class="add-btn">
          <Icon type="search" />新增</Button>
      </div>
      <i-table size="large" :content="self" :columns="columns" :data="newData"></i-table>
      <Page :total="dataCount" size="small"  :page-size="pageSize" show-elevator show-total show-sizer @on-change="changepage"></Page>
    </Card>
  </div>

</template>
<script>
  let testData={
    histories:[{
            id: '14',
            bankname: '招商银行',
            accountname: '二硕',
            banknumber: '12345689',
            blance: '10000',
            isdefault: '是',
            persion: '人工003',
            staus: '开启',
          },
          {
            id: '15',
            bankname: '招商银行',
            accountname: '二硕',
            banknumber: '12345689',
            blance: '10000',
            isdefault: '是',
            persion: '人工003',
            staus: '开启',
          },
          {
              id: '16',
              bankname: '招商银行',
              accountname: '二硕',
              banknumber: '12345689',
              blance: '10000',
              isdefault: '是',
              persion: '人工003',
              staus: '开启',
            },{
            id: '15',
            bankname: '招商银行',
            accountname: '二硕',
            banknumber: '12345689',
            blance: '10000',
            isdefault: '是',
            persion: '人工003',
            staus: '开启',
          },
          {
              id: '16',
              bankname: '招商银行',
              accountname: '二硕',
              banknumber: '12345689',
              blance: '10000',
              isdefault: '是',
              persion: '人工003',
              staus: '开启',
            },{
            id: '15',
            bankname: '招商银行',
            accountname: '二硕',
            banknumber: '12345689',
            blance: '10000',
            isdefault: '是',
            persion: '人工003',
            staus: '开启',
          },{
              id: '16',
              bankname: '招商银行',
              accountname: '二硕',
              banknumber: '12345689',
              blance: '10000',
              isdefault: '是',
              persion: '人工003',
              staus: '开启',
            },{
            id: '15',
            bankname: '招商银行',
            accountname: '二硕',
            banknumber: '12345689',
            blance: '10000',
            isdefault: '是',
            persion: '人工003',
            staus: '开启',
          },{
              id: '16',
              bankname: '招商银行',
              accountname: '二硕',
              banknumber: '12345689',
              blance: '10000',
              isdefault: '是',
              persion: '人工003',
              staus: '开启',
            },{
            id: '15',
            bankname: '招商银行',
            accountname: '二硕',
            banknumber: '12345689',
            blance: '10000',
            isdefault: '是',
            persion: '人工003',
            staus: '开启',
          },
          {
              id: '16',
              bankname: '招商银行',
              accountname: '二硕',
              banknumber: '12345689',
              blance: '10000',
              isdefault: '是',
              persion: '人工003',
              staus: '开启',
            },
            {
              id: '17',
              bankname: '招商银行',
              accountname: '二硕',
              banknumber: '12345689',
              blance: '10000',
              isdefault: '是',
              persion: '人工003',
              staus: '开启',
            }]
  }
  export default {
    name: 'directive_pageage',
    data() {
      return {
        ajaxHistoryData: [],
        // 初始化信息总条数
        dataCount: 0,
        // 每页显示多少条
        pageSize: 3,
        self: this,
        columns: [{
            type: 'selection',
            width: 50,
            align: 'center',
            fixed: 'left'
          }, {
            title: '编号',
            key: 'id'

          },
          {
            title: '银行名称',
            key: 'bankname'
          },
          {
            title: '开户名称',
            key: 'accountname'
          },
          {
            title: '银行卡号',
            key: 'banknumber'
          },
          {
            title: '余额',
            key: 'blance'
          },
          {
            title: '是否默认',
            key: 'isdefault'
          },
          {
            title: '余额',
            key: 'blance'
          },
          {
            title: '操作人',
            key: 'persion'
          },
          {
            title: '状态',
            key: 'staus'
          },
          {
            title: '操作',
            key: 'action',
            align: 'center',
            render: (h, params) => {
              return h("div", [
                h(
                  "Button", {
                    props: {
                      size: "small"
                    },
                    style: {
                      marginRight: "5px",
                      backgroundColor: "#009688",
                      color: 'white'
                    },
                    on: {
                      click: () => {
                        this.$router.push({
                          name: 'edit_news_page'
                        })
                        // this.show(params.index)
                        // e.stopPropagation(); //阻止冒泡
                        // alert('查看');
                      }
                    }
                  },
                  "编辑"
                ),
                h(
                  "Button", {
                    props: {
                      size: "small"
                    },
                    style: {
                      marginRight: "5px",
                      backgroundColor: "#009688",
                      color: 'white',
                      fontSize: '11px'
                    },
                    on: {
                      click: (e) => {
                        e.stopPropagation(); //阻止冒泡
                        alert('删除');
                      }
                    }
                  },
                  "取消默认"
                )
              ]);
            }

          }
        ],
        historyData: []

      }
    },

    methods: {
      // 获取历史记录信息
          handleListApproveHistory() {
            // 保存取到的所有数据
            this.ajaxHistoryData = testData.histories;
            this.dataCount = testData.histories.length;
            // 初始化显示，小于每页显示条数，全显，大于每页显示条数，取前每页条数显示
            if (testData.histories.length < this.pageSize) {
              this.newData = this.ajaxHistoryData;
            } else {
              this.newData = this.ajaxHistoryData.slice(0, this.pageSize);
            }
          },
          changepage(index) {
            var _start = (index - 1) * this.pageSize;
            var _end = index * this.pageSize;
            this.newData = this.ajaxHistoryData.slice(_start, _end);
          }
        },
        pagesize(index){
        let _start = ( this.page - 1 ) * index;
        let _end = this.page * index;
        this.historyData = this.ajaxHistoryData.slice(_start,_end);
        // 当前展示条数
        this.pageSize = index;
        },
        created() {
          this.handleListApproveHistory();
        },
      show(index) {
        this.$Modal.info({
          title: '菜单信息详情',
          render: (h, params) => {
            // console.log(params)
            return h('Form', [
              h('FormItem', {
                  props: {
                    label: '菜单图标',
                  },
                  style: {
                    labelWidth: '100px',
                  },
                  on: {},

                },
                // 原本的content内容（见官网示例下方文档表格属性说明）直接替换如下，因为已经在render和return里了，就不要再写一遍render和return，直接写要渲染的组件就好了，同样如果多个用[]包起来
                [
                  // 使用说明见示例1
                  h('Icon', {
                    props: {
                      type: this.data6[index].address, // data6标红，因为和案例1有关联
                    }
                  }),
                ]),

            ]);

          }

        })
      },
      remove(index) {
        this.data6.splice(index, 1);
      }
    // }
  }
</script>
<style lang="less">
  @import './directive.less';

  .ivu-input:hover {
    border-color: #dcdee2;
  }

  .ivu-input:focus {
    outline: none;
    border-color: #dcdee2;
    box-shadow: 0 0 0 2px transparent;
  }
</style>
